import { Card, Form, Input, Checkbox, Button, message } from 'antd'
import logo from '@/assets/logo.png'
import './index.scss'
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const { loginStore } = useStore()
  const navigate = useNavigate()

  const onFinish = async e => {
    const { mobile, code } = e
    try {
      await loginStore.login({ mobile, code })
      navigate('/')
    } catch (e) {
      message.error(e.response?.data?.message || '登录失败')
    }
  }
  return (
    <div className='login'>
      <Card className='login-container'>
        <img className="login-logo" src={logo} alt='' />
        {/* 登录表单 */}

        <Form
          validateTrigger={['onBlur']}
          initialValues={{
            mobile: '13811111111',
            code: '246810',
            remember: 'true'
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name='mobile'
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: ' 手机号格式不正确，请重新输入 ' ,
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input placeholder='请输入手机号' size='large' />
          </Form.Item>

          <Form.Item
            name='code'
            rules={[
              {required: true, message: '请输入验证码'},
              {
                len: 6,
                message: '验证码6位字符',
                validateTrigger: 'onBlur'
              }
            ]}
          >
          <Input placeholder='请输入验证码' size="large" maxLength={6} />
          </Form.Item>

          <Form.Item
            name='remember'
            valuePropName='checked'
          >
            <Checkbox className='login-checkbox-label'> 我已阅读并同意「用户协议」和「隐私条款」 </Checkbox>
          </Form.Item>

          <Form.Item>
            <Button htmlType='submit' type="primary" size="large" block> 登录 </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login